<template>
  <div class="h-100 flex-column">
    <search-line>
      <div class="section-title">
        菜单配置
      </div>
      <div slot="rightButtons">
        <el-input v-model="searchMenu" placeholder="搜索" clearable>
          <el-button slot="prepend" icon="el-icon-search" />
        </el-input>
      </div>
    </search-line>
    <div class="flex-1 overflow-scroll menu-tree__content">
      <el-tree
        ref="menuTree"
        :data="menus"
        default-expand-all
        :props="defaultProps"
        highlight-current
        :filter-node-method="filterNode"
        @current-change="currentNodeChange"
      >
        <div slot-scope="{ node, data }" class="flex-1 flex menu-item">
          <span class="menu-name text-overflow">{{ data.name }}</span>
          <span v-if="data.permissionId === '0'">
            <el-button icon="el-icon-plus" type="text" @click.stop="clickNodeBtn(node, data, 'addChild')" />
          </span>
          <span v-else>
            <el-button v-if="node.level < 3 " icon="el-icon-plus" type="text" @click.stop="clickNodeBtn(node, data, 'addChild')" />
            <el-button icon="el-icon-delete" type="text" @click.stop="clickNodeBtn(node, data, 'delete')" />
            <el-dropdown trigger="click" szie="mini">
              <span class="el-dropdown-link pl-8" @click.stop>
                <el-button icon="el-icon-more" type="text" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="clickNodeBtn(node, data, 'edit')">
                  编辑
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  @click.native="clickNodeBtn(node, data, 'up')"
                  :disabled="node.permissionId === node.parent.childNodes[0].permissionId"
                >
                  上移
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="clickNodeBtn(node, data, 'down')"
                  :disabled="
                    node.permissionId ===
                      node.parent.childNodes[node.parent.childNodes.length - 1]
                        .permissionId
                  "
                >
                  下移
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </div>
      </el-tree>
    </div>
    <x-dialog :visible.sync="menuDialogVisible" :title="isEdit ? '编辑菜单' : '新建菜单'" @close="menuDialogClose" @submit="menuSubmit">
      <dialog-form ref="menuForm" :menu-form="menuForm" :parent-name="parentName" :is-button="false" />
    </x-dialog>
  </div>
</template>
<script>
import dialogForm from './form'
import * as api from '../../../api/user'
import { cloneDeep } from 'lodash'

export default {
  components: { dialogForm },
  props: {
    getMenus: {
      type: Function,
      required: true
    },
    menus: {
      type: Array,
      required: true
    },
    currentNodeChange: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      searchMenu: '',
      menuForm: {},
      currentOperationItem: {
        node: {},
        data: {}
      },
      isEdit: false,
      menuDialogVisible: false,
      parentName: '',
      defaultProps: {
        children: 'child',
        label: 'name',
        type: 0
      }
    }
  },
  watch: {
    searchMenu(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  created() {
  },
  methods: {
    filterNode(val, data) {
      if (!val) return true
      return data.name.indexOf(val) !== -1
    },
    clickNodeBtn(node, data, type) {
      this.currentOperationItem = {
        node,
        data
      }
      if (type === 'addChild') {
        this.menuDialogVisible = true
        this.isEdit = false
        this.parentName = data.name
        return
      }
      if (type === 'edit') {
        this.menuForm = cloneDeep(data)
        this.menuDialogVisible = true
        this.isEdit = true
        this.parentName = node.parent.data.name
        return
      }
      if (type === 'delete') {
        this.$confirm(`确认删除菜单${data.name}吗？相关子菜单也会被删除`)
          .then((res) => {
            api.delMenu({ permissionId: data.permissionId }).then((res) => {
              this.$message.success('删除成功')
              this.getMenus()
            })
          })
          .catch((e) => {})
        return
      }
      const brotherNodes = node.parent.childNodes
      if (type === 'up') {
        const nodeIndex = brotherNodes.findIndex((item) => node.permissionId === item.permissionId)
        const preNode = brotherNodes[nodeIndex - 1]
        const _data = cloneDeep(data)
        const _preData = cloneDeep(preNode.data)
        ;[_data.sort, _preData.sort] = [_preData.sort, _data.sort]
        Promise.all([api.editMenu(_data), api.editMenu(_preData)]).then((res) => {
          this.$message.success('操作成功')
          this.getMenus()
        })
      }
    },
    menuDialogClose() {
      this.menuForm = {}
    },
    getSort(data) {
      if (data && data.children && data.children.length) {
        const lastSort = data.children[data.children.length - 1].sort
        if (lastSort) {
          return Number(lastSort) + 1
        } else {
          return 99
        }
      } else {
        return 1
      }
    },
    menuSubmit() {
      this.$refs.menuForm.$refs.menuForm.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            api.editMenu(this.menuForm).then((res) => {
              this.$message.success('操作成功')
              this.menuDialogVisible = false
              this.getMenus()
            })
          } else {
            this.menuForm.parentId = this.currentOperationItem.data.permissionId
            this.menuForm.level = 1
            this.menuForm.type = 0
            this.menuForm.sort = this.getSort(this.currentOperationItem.data)

            api.addMenu(this.menuForm).then((res) => {
              this.$message.success('操作成功')
              this.menuDialogVisible = false
              this.getMenus()
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-name {
  line-height: 32px;
  color: #000;
}

.menu-item {
  line-height: 32px;
  justify-content: space-between;
}

.menu-name {
  width: 210px;
}
.menu-tree__content {
  padding-right: 16px;
}
</style>
